<template>
  <div class="main">
    <div class="common-layout">
      <el-container class="contauner">
        <el-aside :width="isCollapse ? '64px' : '200px'" class="aside">
          <NavMenu :collapse="isCollapse"></NavMenu>
        </el-aside>
        <el-container class="page">
          <el-header class="header">
            <NavHeader @changeFold="handleFoldChang"></NavHeader>
          </el-header>
          <el-main class="el-main">Main</el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavMenu from "@/components/nav-menu";
import NavHeader from "@/components/nav-header";
import { ref } from "vue";

const isCollapse = ref(false);
const handleFoldChang = (isFold: boolean) => {
  isCollapse.value = isFold;
  console.log(isFold);
};
</script>

<style scoped lang="less">
.main {
  .aside {
    background-color: #121b35;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    transition: width 0.2s;
  }

  .page {
    .header {
      height: 48px;
      line-height: 48px !important;
      .nav-header {
        line-height: 48px;
      }
    }

    .el-main {
      text-align: center;
      height: calc(100% - 48px);
      background-color: pink;
    }
  }
}
</style>
